<!DOCTYPE html>
<html lang="zh-cn" class="fullscreen-bg" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::header(~{::title},~{::link},~{})">
	<title>首页2 | GemFrame开源权限管理系统v1.0.0</title>
    <!-- Page CSS -->
    <link rel="stylesheet" href="static/cms/assets/css/dashboard/dashboard2.css">
    <link rel="stylesheet" href="static/cms/assets/css/flag/flagicon.css">
	<link rel="stylesheet" href="static/cms/assets/css/maps/jqvmap.css">
	<div th:replace="common/header::head_links">
	</div>
</head>

<body class="sidebar-mini fixed skin-blue">
    <div class="wrapper">
		<!-- Header Section Starts -->
		<div th:replace="~{common/topbar::nav}"></div>
		<div th:replace="~{common/lefter::left_sidebar}"></div>

		<!-- Page Content Starts -->
		<div class="content-wrapper">
			<section class="content-header">
				<h1>
					Dashboard
					<small>Control panel</small>
				</h1>
				<ol class="breadcrumb">
					<li><a href="index.html"><i class="fa fa-dashboard"></i> Home</a></li>
					<li><a href="#">Forms</a></li>
					<li class="active">Editors</li>
				</ol>
			</section>
			<div class="dashboard2">
				<div class="row">
					<div class="col-xl-3 col-lg-6 col-12">
						<div class="counter-box-2">
							<div class="text-left">
								<i class="fa fa-user-o fa-2x"></i>
								<div class="mt-2">Visitors</div>
								<h3 class="mt-1 mb-0 count">10000</h3>
							</div>
						</div>
					</div>
					<div class="col-xl-3 col-lg-6 col-12">
						<div class="counter-box-2">
							<div class="text-left">
								<i class="fa fa-money fa-2x"></i>
								<div class="mt-2">Total Earning</div>
								<div class="money"><h3 class="mb-0">$</h3><h3 class="mt-1 mb-0 count">75800</h3></div>
							</div>
						</div>
					</div>
					<div class="col-xl-3 col-lg-6 col-12">
						<div class="counter-box-2">
							<div class="text-left">
								<i class="fa fa-thumbs-o-up fa-2x"></i>
								<div class="mt-2">Total Likes</div>
								<h3 class="mt-1 mb-0 count">5000</h3>
							</div>
						</div>
					</div>
					<div class="col-xl-3 col-lg-6 col-12">
						<div class="counter-box-2">
							<div class="text-left">
								<i class="fa fa-opencart fa-2x"></i>
								<div class="mt-2">Order Placed</div>
								<h3 class="mt-1 mb-0 count">7000</h3>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<!-- Top Countries Section Starts -->
					<div class="col-xl-5 col-lg-6 col-12">
						<div class="cardbg">
							<h6 class="title-inner text-uppercase">Your Top Countries</h6>
							<p>We only started collection top selling region data.</p>
							<ul class="list-group list-group-flush flags">
								<li class="list-group-item">
									<i class="flag-icon flag-icon-us"></i>
									<span>United States</span>
									<span class="badge">$1,071.10</span>
								</li>
								<li class="list-group-item">
									<i class="flag-icon flag-icon-cn"></i>
									<span>China</span>
									<span class="badge">$1,071.10</span>
								</li>
								<li class="list-group-item">
									<i class="flag-icon flag-icon-nl"></i>
									<span>Netherlands</span>
									<span class="badge">$1,071.10</span>
								</li>
								<li class="list-group-item">
									<i class="flag-icon flag-icon-gb"></i>
									<span>United Kingdom</span>
									<span class="badge">$1,071.10</span>
								</li>
								<li class="list-group-item">
									<i class="flag-icon flag-icon-ca"></i>
									<span>Canada</span>
									<span class="badge">$1,071.10</span>
								</li>
								<li class="list-group-item">
									<i class="flag-icon flag-icon-hu"></i>
									<span>Hungary</span>
									<span class="badge">$1,071.10</span>
								</li>
								<li class="list-group-item">
									<i class="flag-icon flag-icon-vn"></i>
									<span>Vietnam</span>
									<span class="badge">$1,071.10</span>
								</li>
							</ul>
						</div>
					</div>
					<!-- Top Countries Section Ends -->
					<!-- Map Section Starts -->
					<div class="col-xl-7 col-lg-6 col-12">
						<div class="cardbg">
							<h6 class="title-inner text-uppercase">World Map</h6>
							<div id="vmap" style="height: 390px;"></div>
						</div>
					</div>
					<!-- Map Section Ends -->
				</div>
				<!-- Chart Section Starts -->
				<div class="row chartjs">
					<div class="col-xl-6 col-lg-6 col-sm-12">
						<div class="cardbg">
							<h6 class="title-inner text-uppercase">Last Week Sales</h6>
							<div class="chart-wrapper">
								<canvas id="vertical-bar-chart"></canvas>
							</div>
						</div>
					</div>
					<div class="col-xl-6 col-lg-6 col-sm-12">
						<div class="cardbg">
							<h6 class="title-inner text-uppercase">Last Month Revenue</h6>
							<div class="chart-wrapper">
								<canvas id="pie-chart"></canvas>
							</div>
						</div>
					</div>
				</div>
				<!-- Chart Section Ends -->
				<!-- Social Section Starts -->
				<div class="row text-center social-box">
					<div class="col-xl-3 col-lg-6 col-12">
						<div class="counter-box-2 fb-box">
							<div>
								<i class="fa fa-facebook fa-2x"></i>
								<h3>Facebook</h3>
								<h6>Follow Now</h6>
							</div>
						</div>
					</div>
					<div class="col-xl-3 col-lg-6 col-12">
						<div class="counter-box-2 tw-box">
							<div>
								<i class="fa fa-twitter fa-2x"></i>
								<h3>Twitter</h3>
								<h6>Follow Now</h6>
							</div>
						</div>
					</div>
					<div class="col-xl-3 col-lg-6 col-12">
						<div class="counter-box-2 in-box">
							<div>
								<i class="fa fa-instagram fa-2x"></i>
								<h3>Instagram</h3>
								<h6>Follow Now</h6>
							</div>
						</div>
					</div>
					<div class="col-xl-3 col-lg-6 col-12">
						<div class="counter-box-2 yt-box">
							<div>
								<i class="fa fa-youtube fa-2x"></i>
								<h3>YouTube</h3>
								<h6>Follow Now</h6>
							</div>
						</div>
					</div>
				</div>
				<!-- Social Section Ends -->
			</div>
		</div>
		<!-- Page Content Ends -->

		<!-- Back to Top Starts -->
		<a href="javascript:" id="return-to-top"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
		<!-- Back to Top Ends -->
		<!-- Footer Section Starts -->
		<div th:replace="~{common/footer::foot}"></div>
		<!-- Footer Section Ends -->

	</div>
	<!-- jQuery CDN - Slim version (=without AJAX) -->
	<script src="static/cms/assets/js/jquery/slim.min.js"></script>
	<div th:include="common/footer::common_links">
	</div>

	<!-- Popper.JS -->
	<script th:src="@{static/cms/assets/js/jquery/popper.min.js}"></script>
	<!-- Page JS -->
	<script src="static/cms/assets/js/maps/jvector/jquery.vmap.min.js"></script>
	<script src="static/cms/assets/js/maps/jvector/jquery.vmap.world.js"></script>
	<script src="static/cms/assets/js/maps/jvector/jquery.vmap.sampledata.js"></script>
	<script src="static/cms/assets/js/charts/Chart.bundle.min.js"></script>
	<script src="static/cms/assets/js/charts/utils.js"></script>
	<script src="static/cms/assets/js/dashboard/dashboard2.js"></script>
	<!-- Theme JS -->
	<script src="static/cms/assets/js/nanoscroller/nanoscroller.js"></script>
	<script src="static/cms/assets/js/custom/theme.js"></script>
</body>

</html>
